<template>
  <div>
    <BasicTable @register="registerTable" v-if="showTableIf">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增表单设计</a-button>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'users'">
          <li v-for="(item) in record.users" :key="item.username">
            <a-button class="success">{{ item.username }}</a-button>
          </li>
        </template>

        <template v-if="column.key === 'action'">
          <TableAction
              :actions="[
              {
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
                label: '编辑表单设计'
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                label: '删除表单设计',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'right',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>

    <BasicForm @register="register" ref="formRef"></BasicForm>
    <div v-if="showFormDesignIf">
      <a-button type="danger" class="my-4" @click="sendPostForDesign">
        新增或更新表单
      </a-button>
      <VFormDesign ref="formDesignRef" :form-config="formConfig" title="abc"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import VFormDesign from '@/views/form-design/components/VFormDesign/index.vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import {
  getFormDesignList,
  createFormDesign,
  updateFormDesign,
  deleteFormDesign,
} from '/@/api/demo/system';
import { useDrawer } from '/@/components/Drawer';
import { columns, searchFormSchema, formSchema } from './formDesign';
import { useMessage } from "@/hooks/web/useMessage";
import { IFormConfig } from "@/views/form-design/typings/v-form-component";
import { IVFormMethods } from "@/views/form-design/hooks/useVFormMethods";
import { BasicForm, useForm } from '/@/components/Form/index';

export default defineComponent({
  name: 'FormDesignManagement',
  components: {
    BasicForm,
    BasicTable,
    TableAction,
    VFormDesign,
  },
  setup() {
    const [register, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
      labelWidth: 100,
      baseColProps: { span: 24 },
      schemas: formSchema,
      showActionButtonGroup: false,
    });

    const formConfig = ref<IFormConfig>({
      schemas: [],
      layout: 'horizontal',
      labelLayout: 'flex',
      labelWidth: 100,
      labelCol: {},
      wrapperCol: {},
      currentItem: {
        component: '',
        componentProps: {},
      },
      activeKey: 1,
    });

    const fApi = ref<IVFormMethods | null>(null);

    const [registerDrawer, { openDrawer }] = useDrawer();
    const [registerTable, { reload }] = useTable({
      title: '表单设计列表',
      api: getFormDesignList,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      actionColumn: {
        width: 280,
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
      },
    });

    const showFormDesignIf = ref(false);
    const showTableIf = ref(true);
    const formDesignRef = ref(null);
    const oneDesign = ref(null);
    const formRef = ref(null);
    const isUpdate = ref(false);
    const getTitle = ref('新增表单设计');

    function sendPostForDesign() {
      const menuFunc = unref(isUpdate) ? updateFormDesign : createFormDesign;
      const reqData = getFieldsValue();
      const { createMessage } = useMessage();

      reqData["formConfig"] = JSON.stringify(formConfig.value);

      menuFunc(reqData).then(() => {
        createMessage.success(`${getTitle.value}成功`);
      }).catch(() => {
        createMessage.error(`${getTitle.value}失败`);
      });
    }

    function handleCreate() {
      showFormDesignIf.value = true;
      showTableIf.value = false;
    }

    function handleEdit(record: Recordable) {
      isUpdate.value = true;
      setFieldsValue({ ...record });

      formConfig.value = JSON.parse(record.formConfig);
      showFormDesignIf.value = true;
      showTableIf.value = false;
    }

    function handleDelete(record: Recordable) {
      const { createMessage } = useMessage();
      deleteFormDesign(record.id).then(() => {
        createMessage.success(`已成功删除表单设计`);
        reload();
      }).catch(() => {
        createMessage.error('删除表单设计失败');
      });
    }

    return {
      register,
      registerTable,
      registerDrawer,
      handleCreate,
      handleEdit,
      handleDelete,
      showFormDesignIf,
      showTableIf,
      formDesignRef,
      sendPostForDesign,
      formConfig,
      fApi,
      oneDesign,
    } as ReturnType<typeof setup>;
  },
});
</script>
